import _ from 'lodash'
import React from 'react'

import * as State from '../state'
import * as U from '../state/update'

import { DB } from './configure'
import ErrorBoundary from '../util/error'

export default function HelpPage(props) {
    const { connect, empty, config } = props

    if (empty) return null

    let db = DB(connect.active)

    return (
        <div className="help-page">
            <div className="help-tab" onClick={(e) => animateScrollHere(e.target)}>
                <span className="pt-icon-standard pt-icon-help" /> {db.name} Help
            </div>
            <div className="help-content">
                <ErrorBoundary>
                    {db.Clippy ? (
                        <db.Clippy key="clippy" connect={connect} config={config[connect.active]} />
                    ) : null}
                </ErrorBoundary>
            </div>
        </div>
    )
}

function ease(t) {
    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
}

function animateScrollHere(el) {
    let s0 = document.body.scrollTop,
        s1 = el.offsetTop - 10,
        t0 = Date.now(),
        t1 = t0 + 400

    function helper() {
        document.body.scrollTop = s0 + ease((Date.now() - t0) / (t1 - t0)) * (s1 - s0)

        if (Date.now() < t1) {
            requestAnimationFrame(helper)
        }
    }
    helper()
}
